<template>
<view class="container">
  <mvBar :mysNavConfig="mysNavConfig"></mvBar>
  <view class="list-container">
    <scroll-view scroll-y>
      <view class="list-panel" v-if="dataList.length > 0">
          <view v-for="(item,i) in dataList" :key="item.id" @click="handleChosed(item,i)">
            <view class="list-item">
              <view>
                <p class="time">{{item.invoiceTime}}</p>
                <p class="name">{{item.serverName}}</p>
                <p class="address">{{statusMap[item.invoiceState]}}</p>
              </view>
              <view style="text-align: right">
                <uni-icons type="forward" size="18" color="#6A6A6A" />
                <view class="price">
                  <text>{{item.invoiceAmount}}</text>元
                </view>
                <view class="reApplyBtn" v-if="item.invoiceState === 2" @click="onRepeal(item.orderId)">作废并重新开票</view>
              </view>
            </view>
          </view>

      </view>
      <empty v-else />
    </scroll-view>
  </view>
</view>
</template>

<script>

import mvBar from "@/components/mysNavBar";
import evanRadio from "@/components/evan-radio/evan-radio.vue";
import evanRadioGroup from "@/components/evan-radio-group/evan-radio-group.vue";
import empty from '@/components/empty.vue'
import {getInvoiceHistoryList, getInvoiceOrderList, repealApply} from "@/api";


export default {
  name: "index",
  components: { mvBar,evanRadio,evanRadioGroup,empty },
  data(){
    return{
      mysNavConfig: {
        navPadding: true,
        isHome: false,
        navFixed: true,
        bgColor:'#FFFFFF',
        navTitle: {
          text: "开票历史",
          color: "#1B1B1B",
          fontSize: "34upx", // px upx rpx
          fontWeight: "500", // blod
        },
        leftIconPath: '/static/header/back-b.png',
        // rightIconPath: '/static/header/back-b.png',
      },
      current: 0,
      tabs: ['加油订单', '充电订单'],
      pickOrder: [],
      orderAmount: 0,
      dataList: [],
      statusMap:{
        1: '开票中',
        2: '已开票',
        3: '开票未通过',
        4: '已作废',
        5: '作废未通过'
      }
    }
  },
  onLoad(){
    this.getList()
  },
  methods: {
    async getList() {
      // 1 开票中 2已开票 3未通过-作废中 4已作废 5作废未通过

      const params = {
        pageNum: 1,
        pageSize: 999
      }
      const res = await getInvoiceHistoryList({...params})
      if (res.code === 200)
        this.dataList = res.rows
    },
    changeTab(index) {
      this.pickOrder = []
      this.orderAmount = 0
      this.getList()
    },
    handleChosed(data,i){
      const id = data.applyId
      uni.navigateTo({
        url: `/pages/personal-center/invoice/detail?id=${id}`
      })
    },
    chosedAll(evt){
      const val = evt.detail.value
      if (val==='page')
        this.pickOrder = []
    },
    handleInvoice(){
      if (this.pickOrder.length === 0){
        uni.showToast({title: '请选择开票订单',icon: "error"})
        return false
      }
      uni.navigateTo({
        url:`/pages/personal-center/invoice/invoice-info?orders=${this.pickOrder.join(',')}&orderAmount=${this.orderAmount}&orderType=${this.current+1}`
      })
    },
    async onRepeal(id) {
      const params = {applyId: id}
      const res = await repealApply({...params})
      console.log(res)
      if (res.code === 200) {
        uni.showToast({
          title: '申请成功',
          icon: 'success'
        })
        await this.getList()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  .history{
    font-size: 24upx;
    color: #9D9D9D;
  }
  .list-container{
    .list-panel{
      padding: 20upx 20upx 160upx;
      .list-item{
        box-sizing: border-box;
        width: 100%;
        border-radius: 24upx;
        background: #FFF;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 24upx 32upx;
        margin-bottom: 20upx;
        position: relative;
        .reApplyBtn{
          padding: 0 16upx;
          line-height: 60upx;
          border: 1px solid #1B1B1B;
          border-radius: 8upx;
          font-size: 24upx;
          margin-top: 18upx;
          //position: absolute;
          //right: 32upx;
          //bottom: 32upx;
        }
        .time,.address{
          color: #6A6A6A;
          font-size: 24upx;
        }
        .address,.name{
          margin-top: 16upx;
        }
        .radio{
          margin-right: 20upx;
        }
        .price{
          //position: absolute;
          //right: 32upx;
          text{
            font-size: 44upx;
            font-weight: 700;
            margin-right: 12upx;
          }
        }
      }
    }
  }
  .total-panel{
    width: 100%;
    //height: 140upx;
    background: #FFFFFF;
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 22upx 32upx 40upx;
    box-sizing: border-box;
    .btn{
      position: absolute;
      right: 24upx;
      top: 40upx;
      background: #006241;
      color: #FFFFFF;
      text-align: center;
      width: 200upx;
      line-height: 80upx;
      border-radius: 60upx;
      font-size: 28upx;
      font-weight: 400;
    }
    .info{
      .price{
        font-size: 40upx;
        font-weight: 700;
        color: #006241;
      }
    }
    .radios{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-top: 16upx;
      radio{
        margin-right: 32upx;
      }
    }
  }
}
</style>